Conversation
When users navigate the hidden TextInput with arrow keys, the cursor could move backwards causing Backspace to delete the wrong character or do nothing. Lock the cursor at the end at all times using the `selection` prop and an `onSelectionChange` handler that forces a re-render to snap it back if it drifts.
Each slot now carries a `focus()` method that calls focusSlot internally, eliminating the need for an OTPInputRef just to support tappable slots. Also adds a `clearTextOnFocus` prop (default true) and automatically suppresses the iOS native clearTextOnFocus empty-string event when slot.focus() is used, so the truncated value is preserved correctly. Docs consolidate the focusSlot guide into getting-started and remove the separate guides/ section.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What
Two improvements shipped together:
slot.focus()on SlotPropsfocus()method directly — noOTPInputRefneeded for tappable slots.ref.current?.focusSlot(index)with the simpleronPress={slot.focus}.clearTextOnFocusempty-string event fired afterslot.focus(), so the truncated value is preserved correctly.clearTextOnFocusprop (defaulttrue) for manual control when needed.Cursor lock fix
TextInputcursor backwards, causing Backspace to delete the wrong character or do nothing.selection={{ start: value.length, end: value.length }}keeps the cursor at the end on every render;onSelectionChangetriggers a re-render to snap it back if it drifts.Changes
src/use-input.tsxslot.focuson each SlotProps; suppress iOS clearTextOnFocus after slot focus;onSelectionChangehandlersrc/input.tsxclearTextOnFocusprop; conditionalonPressclear;pointerEvents="none"on TextInputsrc/types.tsfocusadded toSlotProps;clearTextOnFocusadded toOTPInputPropssrc/input.test.tsxslot.focus(); suppression behavior covereddocs/slot.focusdocumented in SlotProps table; focusSlot guide merged into getting-startedexample/Slotcomponents are nowPressablewithonPress={focus}— no wrapper needed